<script type="text/javascript">
    $(document).ready(function(){
        $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

        jQuery('li.ui-tabs-nav-item a[href]').click(function(e) {
            var href = jQuery(this).attr('href');
            var id = href.substring(10);
            var reqExp = /^#fragment-/ig;
            if(reqExp.test(href)){
                var baseUrl = window.location.href;
                window.location = baseUrl + '/detail/' + id;
            }
        });
    });    
</script>

<div id="content">
    <div class="container_large">
        <h1 class="blue">Car News</h1>
        <h4 class="block-title" style="color: gray;">
            Latest News
        </h4>
        <div id="featured" >
            <ul class="ui-tabs-nav">
<?php
            $index = 0;
            foreach($news_latest_list->result() as $row){
                if($index >= 4){
                    break;                                 
                }
                echo '<li class="ui-tabs-nav-item'. ($index == 0?' ui-tabs-selected' : '') . '" id="nav-fragment-' . $row->Id . '">';
                //echo "<a href=\"#fragment-" . $row->Id . "\">";
                //echo "<img src=" . base_url() . "system/public/assets/news/" . $row->Thumbnail . " alt=\"\" />";
				echo "<a href=\"#fragment-" . $row->Id . "\">";
                echo "<span>" . $row->ShortDesc . "</span>";
                echo "</a></li>";
                $index++;
            }
?>
            </ul>            
<?php
            $index = 0;
            foreach($news_latest_list->result() as $row){
                if($index >= 4) 
                    break; 

                echo "<div id=\"fragment-" . $row->Id . "\" class=\"ui-tabs-panel". ($index > 0?" ui-tabs-hide":"") . "\">";
                echo '<a href="detail' . $row->Id . '">';
                echo '<img src="' . base_url() . 'system/public/assets/news/thumbnails/' . $row->Thumbnail . '" alt="" />';
                echo '</a>';
                echo '<div class="info">';
                echo '<h2><a href="news/detail/' . $row->Id . '" >' . $row->Title . '</a></h2>';
                //echo "<p>" . $row->ShortDesc . "<a href=\"#\" >read more</a></p>";
                echo '</div>';
                echo '</div>';
                $index++;
            }
?>
        </div>
        <div class="separator"></div>
        <!-- List aticle -->
        <h4 class="block-title" style="color: red;">
            News
        </h4>
        <ul class="article" style="float: left; width: 648px;">
<?php
        foreach($newslist->result() as $row){
            $short_description = substr(strip_tags($row->Description), 0, 200);
            $last_index = strrpos($short_description, ' ');
            echo '<li>';
            echo "<img class=\"img-news\" src=" . base_url() . "system/public/assets/news/thumbnails/" . $row->Thumbnail . " alt=\"\" />";
            echo "<div class=\"feature-news\">";
            echo "<h2><a href=\"news/detail/" . $row->Id . "\">" . $row->Title . "</a></h2>";            
            echo 
                "<p>" . 
                ($row->modified_date != '' ? date_format(new DateTime($row->modified_date), 'd F Y') : "") . 
                " Last updated at " . 
                ($row->modified_date != '' ? date_format(new DateTime($row->modified_date), 'G:ia') : "") . 
                "</p>";
            echo "<p>" . substr($short_description, 0, $last_index) . "...</p>";
            echo "</div>";
            echo "</li>"; 
        }
?>
        </ul>
        <div class="advertise">
            <a id="gas"></a>
            <ul class="gas-price">
<?php
            foreach($gas_price->result() as $row)
            {
                echo "<li>". $row->price . "</li>";
            }
?>
            </ul>
            <div class="separator" style="height: 10px;"></div>
            <img src="<?php echo base_url(); ?>system/public/img/news_banner.png" />
        </div>
    </div>        
</div>
<div class="separator"></div>